{% extends "element/saas/base.html" %}
{% load future wenlincms_tags wlcore_tags %}

{% block header %}{% endblock %}
{% block footer %}{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" href="{{ STATIC_URL }}{{ "element/saas/css/login.css"|file_time_stamp }}">
{% endblock %}

{% block wlmain %}
    <div class="bm-wrap-bg">
        <div class="login-box signup-box">
            <h2>{{ sitesettings.website_name }}&nbsp;</h2>
            <div class="clear"></div>

            <form id="signup" method="post" class="am-form"
                  {% if form.is_multipart %}enctype="multipart/form-data" {% endif %}>
                <fieldset>
                    <div class="login-form signup-form">
                        <div class="user-name">
                            <label for="username"><i class="am-icon-user"></i></label>
                            <input type="text" name="username" class="am-form-field js-pattern-username" id="user"
                                   placeholder="请输入用户名" required minlength="2" maxlength="20"
                                   data-validation-message="中文、字母、数字、@_-，2-16位">
                        </div>
                        <div class="user-pass">
                            <label for="password1"><i class="am-icon-lock"></i></label>
                            <input type="password" name="password1" id="password1" class="am-form-field js-pattern-password"
                                   placeholder="请输入密码" required minlength="6" maxlength="30">
                        </div>
                        <div class="user-pass">
                            <label for="password2"><i class="am-icon-lock"></i></label>
                            <input type="password" name="password2" id="password2" class="am-form-field"
                                   placeholder="请重复密码" required data-equal-to="#password1"
                                   data-validation-message="密码不一致，请确认">
                        </div>
                    </div>

                    <div class="login-links">
                        <a href="/accounts/login/" class="am-fr">立即登录</a>
                        <br/>
                    </div>

                    <div class="am-cf bm-submit-login-wrap">
                        <input type="submit" id="submit" value="注 册" class="am-btn am-btn-primary am-btn-sm">
                    </div>

                    <div class="login_errors">
                        {% if form.non_field_errors %}
                            {{ form.non_field_errors }}
                        {% endif %}
                    </div>
                </fieldset>
            </form>

            <form method="post" class="am-form am-form-horizontal" id="random_code_form">
                {% csrf_token %}
                <div class="am-form-group random_code_verification">
                    <label for="captcha_1"><i class="am-icon-code-fork"></i></label>
                    <input type="text" name="captcha_1" id="id_captcha_1"
                           class="am-form-field id_captcha_1" placeholder="图片验证码" maxlength="4" required="true"
                           style="width: 61%;border: 1px solid #eee;"/>

                    <div id='captcha'>{{ random_code.captcha }}</div>
                </div>
            </form>

            <div class="partner signup-partner">
                <h3>&nbsp;合作账号</h3>

                <div class="am-btn-group">
                    <ul>
                        <li style="width: 11%"><a href="#">&nbsp;</a></li>
                        <li><a><i class="am-icon-weibo am-icon-sm am-primary"></i><span>微博注册</span> </a></li>
                        <li><a><i class="am-icon-weixin am-icon-sm am-primary"></i><span>微信注册</span> </a></li>
                    </ul>
                </div>
            </div>

        </div>
    </div>

    <div class="am-modal am-modal-alert" tabindex="-1" id="signup_sucess">
        <div class="am-modal-dialog">
            <div class="am-modal-bd" style="padding: 40px 0">
                恭喜您注册成功，跳转登录页面中...
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-confirm>确定</span>
            </div>
        </div>
    </div>
{% endblock %}

{% block footer_js %}
    <script src="{{ STATIC_URL }}{{ "element/saas/js/ajaxCookieSet.js"|file_time_stamp }}"></script>
    <script src="{{ STATIC_URL }}{{ "opensource/others/particles2.js"|file_time_stamp }}"></script>
    <script src="{{ STATIC_URL }}{{ "element/saas/js/login.js"|file_time_stamp }}"></script>
{% endblock %}
